<template>
  <div>
  <van-swipe-cell v-for="ind in ls " :key="ind.title">
    <div >
      <van-card
        :num="ind.num"
        :price="formatPrice(ind.price)"
        :desc="ind.desc"
        :title="ind.title"
        :class="ind.class"
        :thumb="ind.thumb"
      />
    </div>
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" @click="del(ind.goodsid,ind.carid)" />
    </template>
  </van-swipe-cell>
  <van-submit-bar :price="pricecnt" button-text="提交订单" @submit="onSubmit"
  style="bottom: auto; top:85%"
  />
  <div v-show="ls.length==0">
    <van-empty image="network" description="啊哦,购物车是空的" />
  </div>
  </div>
</template>

<script>
  import request, { getUrl } from "../../utils/request";
  import { showDlg } from "../../utils/tools";
  import {removeStorageToken,getStorageUser,setStorageUser} from "@/utils/storage.js"//导入

import { ref } from "vue";
  export default{
    data(){
      return{
        pricecnt:0.00,
        ls:[
        ]
      }
    },
    methods:{
      formatPrice(price){//格式化价格
        return (price*100/100).toFixed(2);
      },
      del:function(goodsid,carid){//删除购物车中的数据
      var that = this;
          request({
            url:getUrl("Goods/delCarGoods"),
            method:"post",
            headers: {
                              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data:{
               goodsId:goodsid,
               carId:carid
            }
          }).then(res=>{
            showDlg("提示",res.data.msg)
            that.ref()//刷新列表
          }).catch(error=>{
            showDlg("错误提示","网络错误")
          })
      },
      onSubmit:function(){//提交订单
      if(this.ls.length==0){
        showDlg("提示","您的购物车是空的哦，不能提交")
        return;
      }
      var that=this;
       request({
            url:getUrl("Goods/addOrder"),
            method:"post",
            headers: {
                              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data:{
               uid:getStorageUser().id
            }
          }).then(res=>{
            showDlg("提示",res.data.msg)
            that.ref()//刷新列表
          }).catch(error=>{
            showDlg("错误提示","网络错误")
          })
      },
      ref:function(){//刷新购物车数据
        var that = this
          request({//页面加载的时候 发起请求
            url:getUrl("Goods/getCarList"),//URL
            method:"get",//请求方法
            params:{
              uid:getStorageUser().id
            }
          }).then(res=>{//成功回调
              var objstr= JSON.stringify(res.data.data)
             objstr= objstr.replaceAll("goodscnt","num")
             objstr= objstr.replaceAll("goodname","desc")
             objstr= objstr.replaceAll("spec","title")
             objstr= objstr.replaceAll("imgurl","thumb")
             var obj = JSON.parse(objstr)
             var pricecnt=0.00;//计算总价
             for(var i=0;i<obj.length;i++){
               pricecnt=pricecnt+obj[i].price*obj[i].num
             }
             that.pricecnt=pricecnt*100
             that.ls=obj
          })//失败回调
          .catch(error=>{

          })
      }
    },
    created(){//页面加载的时候
    var that = this
      request({//页面加载的时候 发起请求
        url:getUrl("Goods/getCarList"),//URL
        method:"get",//请求方法
        params:{
          uid:getStorageUser().id
        }
      }).then(res=>{//成功回调
          var objstr= JSON.stringify(res.data.data)
         objstr= objstr.replaceAll("goodscnt","num")
         objstr= objstr.replaceAll("goodname","desc")
         objstr= objstr.replaceAll("spec","title")
         objstr= objstr.replaceAll("imgurl","thumb")
         var obj = JSON.parse(objstr)
         var pricecnt=0.00;//计算总价
         for(var i=0;i<obj.length;i++){
           pricecnt=pricecnt+obj[i].price*obj[i].num
         }
         that.pricecnt=pricecnt*100
         that.ls=obj
      })//失败回调
      .catch(error=>{

      })
    }
  }
</script>

<style>
    .goods-card {
      margin: 0;
      background-color: @white;
    }
    .delete-button {
      height: 100%;
    }
</style>
